<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>剧本工坊</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/chat.css">
  <link rel="stylesheet" href="css/generate.css">
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="nav-brand">剧本工坊</div>
    <ul class="nav-menu">
      <li><a href="index.html" class="active">首页</a></li>
      <li><a href="generate.html">生成剧本</a></li>
    </ul>
  </nav>

  <!-- 欢迎横幅 -->
  <header class="hero">
    <h1>欢迎来到剧本工坊！</h1>
    <p>在这里,做自己的主角</p>
  </header>

  <!-- 剧本展示区域 -->
  <main class="container">
    <!-- 轮播图部分 -->
    <div class="carousel">
      <div class="carousel-container">
        <div class="carousel-slide">
          <img src="imgs\2.png" alt="古风武侠剧本">
          <p>古风武侠剧本</p>
        </div>
        <div class="carousel-slide">
          <img src="imgs\8.png" alt="梦幻仙侠剧本">
          <p>梦幻仙侠剧本</p>
        </div>
        <div class="carousel-slide">
          <img src="imgs\3.png" alt="现代都市剧本">
          <p>现代都市剧本</p>
        </div>
        <div class="carousel-slide">
          <img src="imgs/9.png" alt="权谋宫斗剧本">
          <p>权谋宫斗剧本</p>
        </div>
        <div class="carousel-slide">
          <img src="imgs/10.png" alt="悬疑推理剧本">
          <p>悬疑推理剧本</p>
        </div>
        <div class="carousel-slide">
          <img src="imgs/7.png" alt="科幻穿越剧本">
          <p>科幻穿越剧本</p>
        </div>
      </div>
      <button class="carousel-prev">&#10094;</button>
      <button class="carousel-next">&#10095;</button>
    </div>

    <!-- 剧本描述区域 -->
    <div class="examples-description">
      <h2>剧本类型介绍</h2>
      <div class="example-types">
        <div class="example-type">
          <h3>古风武侠</h3>
          <p>传统文化与武侠精神的完美结合，带您体验快意恩仇的江湖世界。</p>
        </div>
        <div class="example-type">
          <h3>梦幻仙侠</h3>
          <p>修仙问道、飞天遁地，体验道法自然的仙侠世界。</p>
        </div>
        <div class="example-type">
          <h3>现代都市</h3>
          <p>反映当代生活的现实题材，展现都市人的喜怒哀乐。</p>
        </div>
        <div class="example-type">
          <h3>科幻题材</h3>
          <p>探索未来科技与人性的碰撞，展现宏大的未来世界观。</p>
        </div>
        <div class="example-type">
          <h3>悬疑推理</h3>
          <p>扣人心弦的故事情节，引人入胜的推理过程。</p>
        </div>
        <div class="example-type">
          <h3>奇幻冒险</h3>
          <p>天马行空的想象力，带来震撼心灵的奇幻之旅。</p>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="footer-content">
      <p>&copy; 2024 剧本工坊。保留所有权利。</p>
      <div class="social-links">
        <a href="#" target="_blank">Facebook</a>
        <a href="#" target="_blank">Twitter</a>
        <a href="#" target="_blank">Instagram</a>
      </div>
    </div>
  </footer>

  <script src="js/script.js"></script>
  <script src="js/carousel.js"></script>
  <script src="js/chat.js"></script>
  <script src="js/generate.js"></script>
</body>

</html>